<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02_元素属性操作</title>
		<!-- 元素属性操作：  元素   固定属性  附加属性
		                                     固定属性<a href="#"></a>
											 附加属性<input type-="radio" checked>
				attr()                    有参--1个参数  功能：获取匹配元素集合中的第一个元素的指定属性值
				                                                  理解：通过属性获取属性值
																  语法：attr（“属性”）
													2个参数   功能：【设置】匹配元素集合中所有元素的指定属性值
													            理解：通过属性和属性值  设置元素样式
																  语法：attr（“属性”，”属性值“）
				 removeAttr()       有参---功能：移除匹配元素集合中所有元素的指定属性
				                                                 理解：移出属性--元素效果消失
				 prop()
				 removeProp()
				 -->
	<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- img 1.gif图片引入    三个按钮     id=“getAttrBtn”        获取属性
		                                                         id=“setAttrBtn”          设置属性
																 id=“removeAtrtrBtn”   移除属性
				div          id=“output”  显示文本
				-->
				
					<h1>Attr()函数与removeAttr()函数使用</h1>
					<img src="../img/跳舞.gif" alt="跳舞"  id="myImg"/>
					<button id="getAttrBtn">获取属性</button>
					<button id="setAttrBtn">设置属性</button>
					<button id="emoveAttrBtn">移除属性</button>
					<div id="output">显示文本</div>
					<h2>练习：attr（）函数</h2>
					<button class="gan">点击1</button>
					<button class="gbn">点击2</button>
					<button class="gcn">点击3</button>
					 <a href="#" target="_blank">百度</a>
					 <div id="out"></div>
					 <video src="/oceans-clip.mp4" controls></video>
					 <!-- 通过jQuery实现功能点击按钮1：百度一下，实现真正页面跳转功能
					          通过jQuery实现功能点击按钮2：百度一下，实现下载功能
							  通过jQuery实现功能点击按钮3：百度一下，页面上放视频播放器
							  -->
				<script>
					$("#getAttrBtn").click(function(){
									//通过元素固定属性名，获取到属性值
									var imgs=$("#myImg").attr("src");
									$("#output").text("img的src路径是："+imgs);
								});
								//上述代码：实现图片切换
								//$("#myImg").attr("src","../img/2.gif")
								$("#setAttrBtn").click(function(){
									//通过元素固定属性名，获取到属性值
									$("#myImg").attr("src","../img/1.gif");
									$("#output").text("img的src路径是：../img/1.gif")
								});
								//移除属性    ---img图片元素  src
								$("#removeAttrBtn").click(function(){
									$("#myImg").removeAttr("src");
									$("#output").text("图片已经被移除了~~");
								});
								// 练习1
								$(".gan").click(function(){
									$("a").attr("href","https://www.baidu.com/?a=1");
								});
								//练习2
								$(".gbn").click(function(){
									$("a").attr("href","../js/jquery-1.11.1.zip");
								});
								//练习3
								$(".gcn").click(function(){
									$("video").attr("autoplay","autoplay");
									$("out").text("上方是一个视频播放器")
								});
				</script>
				
				
	</body>
</html>